<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<!-- 头部 -->
		<c-nav-bar1 title="申请退票退款"></c-nav-bar1>
		<view class="bg" :style="{'height':(320-mt)+'px'}"></view>
		<view class="box ship_hotel">
			<text class="sh_title">{{item.jointName}}</text>
			<view class="sh_date">
				游玩日期
				<text>{{item.playDate||''}} {{item.playWeek||''}}</text>
			</view>
		</view>
		<!-- 游客信息 -->
		<view class="box person_info">
			<text class="title">订单信息</text>
			<view class="pi_hotel">
				<view class="name">{{item.hotelOrderInfo.homestayName||''}}</view>
				<view class="info">
					<view class="left">{{item.hotelOrderInfo.houseBaseName||''}} · {{item.hotelOrderInfo.checkInRooms||''}}间 · {{item.hotelOrderInfo.num||''}}晚</view>
					<view class="right">￥{{item.hotelOrderInfo.orderAmount||''}}</view>
				</view>
			</view>
			<view v-for="(tourist,index) in touristList" :key="index" class="pi_item">
				<view class="pii_left">
					<view class="piil_name">
						<text>{{tourist.name}}</text>
						<view class="piil_idcard"><view class="zj">{{personCardCfg[tourist.credentialType]||'证件号'}}</view> {{tourist.idcard}}</view>
						<view class="pltype">{{personTypeCfg[tourist.type]||''}}</view>
					</view>
				</view>
				<view class="pii_right">￥{{tourist.price}}</view>
			</view>
		</view>
		<view class="kc_tip">预计扣除手续费￥{{totalRefundCharge}}，船票￥{{shipCharge}}，酒店民宿￥{{hotelCharge}}</view>
		<!-- 退款原因 -->
		<view class="box refund">
			<text class="title">退款原因</text>
			<view class="r_item" v-for="(item,index) in refundReasons" :key="index">
				<text>{{item.title}}</text>
				<image src="https://fsy.shengsi.gov.cn/file/20240906/119a9318c011420ba8b7677bc12fbf00.png" mode="" v-if="!item.isSelect"
					@tap="selectReason(item,index)"></image>
				<image src="@/static/my/icon_select.png" mode="" v-else @tap="selectReason(item,index)"></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="b_left">
				<view>预计退款：<span>￥</span><text>{{price.toFixed(2)}}</text></view>
			</view>
			<view class="b_right">
				<view class="br_tk" @tap="toRefund">确认退票</view>
			</view>
		</view>
		<u-popup :show="confrimShow" @close="confrimShow=false">
			<view class="details">
				<view class="title">
					<text>申请退票</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="confrimShow=false"></image>
				</view>
				<view class="c_alert">
					您确定要退票吗？确认申请退票将不可撤回，再次购买可能会因为无票，影响您的游玩行程！
				</view>
				<view class="c_money">
					<text>退款金额</text>
					<text>￥{{price}}</text>
				</view>
				<view class="c_memo">退款预计1-7个工作日原路退回，请耐心等待</view>
				<view class="c_btns">
					<view @tap="confrimShow=false">我再想想</view>
					<view @tap="confirmApply">确定申请</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'refundTicket',
		data() {
			return {
				h: uni.getWindowInfo().windowHeight - 60,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#FFFFFF"
				},
				item: null,
				week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
				passengers: [],
				refundReasons: [{
						title: '购票错误',
						isSelect: false
					},
					{
						title: '行程有变',
						isSelect: false
					}
				],
				price: 0,
				detailsShow: false,
				confrimShow: false,
				refundReason: '',
				touristList: [],
				totalRefundCharge:0,
				shipCharge:0,
				hotelCharge:0
			}
		},
		onLoad(option) {
			if (option.id) {
				this.getRefundInfo(option.id);
				this.getDetails(option.id);
			}
		},
		methods: {
			getRefundInfo(id){
				this.$api.get('/api/shipHotel/wouldRefund/' + id).then(res => {
					if (res.data.code === 0) {
						this.totalRefundCharge = res.data.data.totalRefundCharge||0;
						this.shipCharge = res.data.data.totalShipRefundCharge||0;
						this.hotelCharge = res.data.data.totalHotelRefundCharge||0;
						this.price = res.data.data.totalRefundFee||0;
					} else this.$showModal(res.data.msg)
				})
			},
			getDetails(id) {
				this.$api.get('/api/shipHotel/getShipHotelOrderInfo/' + id).then(res => {
					if (res.data.code === 0) {
						this.item = res.data.data;
						this.item.playDate = new Date(this.item.isShipOrderListDTO.sailDate).Format('yyyy-MM-dd');
						this.item.playWeek = this.week[new Date(this.item.isShipOrderListDTO.sailDate).getDay()];
						this.item.isShipOrderListDTO.detailDTOList.forEach(d => {
							this.touristList.push({
								name: d.passName,
								type: d.priceType,
								idcard: d.credentialNum,
								credentialType: d.credentialType,
								price: parseFloat(d.realFee)||0
							})
						});
						this.item.shipPrice = this.item.isShipOrderListDTO.detailDTOList[0].realFee;
						this.item.shipTotal = this.item.isShipOrderListDTO.detailDTOList.length;
					} else this.$showModal(res.data.msg)
				})
			},
			selectReason(item, index) {
				this.refundReason = item.title;
				this.refundReasons.forEach((d, i) => this.$set(this.refundReasons[i], 'isSelect', false));
				this.$set(this.refundReasons[index], 'isSelect', true);
			},
			//点击确认退款弹出提示
			toRefund() {
				if (!this.refundReason) {
					return uni.showModal({
						title: '温馨提示',
						content: '请选择退款原因后,再提交申请退款',
						showCancel: false,
						confirmText: '我知道了',
						confirmColor: '#007A69'
					})
				}

				this.confrimShow = true;
			},
			//确定申请
			confirmApply() {
				this.$api.get('/api/shipHotel/quitOrder/' + this.item.orderCode + '/' + this.refundReason).then(res => {
					if (res.data.code === 0) {
						this.confrimShow = false;
						this.$showToast('申请退款成功');
					} else this.$showModal(res.data.msg)
					
					setTimeout(() => {
						uni.redirectTo({
							url: '/pagesMy/order/index?name=船票+住宿&type=0&typeIndex=3'
						})
					}, 1500)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 140rpx;
		box-sizing: border-box;

		.bg {
			position: fixed;
			// top: 44px;
			width: 100%;
			background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
		}

		.box {
			width: calc(100% - 48rpx);
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 24rpx;
			position: relative;
			box-sizing: border-box;
		}

		.ship_hotel {
			margin-top: 46rpx;

			.sh_title {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
			}

			.sh_date {
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
				padding-bottom: 10rpx;

				text {
					color: #FF7D01;
					margin-left: 30rpx;
				}
			}
		}

		.person_info {
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
			
			.pi_hotel{
				margin: 40rpx 0 36rpx;
				.name{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					line-height: 32rpx;
				}
				.info{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 25rpx;
					.left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 26rpx;
					}
					.right{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						line-height: 30rpx;
					}
				}
			}

			.pi_item {
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				padding-top: 28rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.pii_left {
					.piil_name {
						display: flex;
						align-items: center;

						text {
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						.pltype {
							padding: 0 7rpx;
							height: 36rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #94A9C8;
							margin-left: 15rpx;
						}

						.piil_idcard {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-left: 20rpx;
							display: flex;
							align-items: center;
							.zj{
								max-width: 120rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}

				.pii_right {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 30rpx;
					text-align: right;
				}
			}
		}

		.kc_tip {
			margin: 24rpx 30rpx 23rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF7D01;
			text-indent: 30rpx;
			z-index: 2;
			width: 100%;
			padding-left: 24rpx;
			box-sizing: border-box;
		}

		.refund {
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.r_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 31rpx 0;
				border-bottom: 1rpx solid #EFEFEF;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}

				&:last-child {
					padding-bottom: 0;
					border: none;
				}
			}
		}

		.order {
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.o_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;

				text {
					&:first-child {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					&:last-child {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.bottom {
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			height: 112rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b_left {
				height: 40rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF4141;
				}

				text {
					font-size: 48rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FF4141;
				}
			}

			.b_right {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.br_mx {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}

				.br_tk {
					width: 220rpx;
					height: 80rpx;
					background: #007A69;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 24rpx;
				}
			}
		}

		.details {
			padding: 40rpx 30rpx 64rpx;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.d_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 44rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;

					&.red {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #FF4141;
					}
				}

				&.yjtk {
					margin-top: 94rpx;
				}
			}

			.d_item2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}

			.c_alert {
				margin-top: 64rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.c_money {
				margin-top: 40rpx;
				width: 100%;
				height: 100rpx;
				background: #F5F8FA;
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

					&:last-child {
						font-weight: bold;
						color: #FF4141;
					}
				}
			}

			.c_memo {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.c_btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 144rpx;

				&>view {
					width: calc(50% - 15rpx);
					height: 88rpx;
					border-radius: 16rpx;
					border: 1rpx solid #AAAAAA;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

					&:last-child {
						background: #007A69;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>